<template>
  <div>
    <h3 @click="getWatchList()">{{ $t("watch.title") }}</h3>
    <div class="search">
      <el-button
        type="success"
        plain
        icon="el-icon-circle-plus-outline"
        style="width: 300px"
        @click="createdProject()"
        >{{ $t("watch.created") }}</el-button
      >
    </div>
    <el-table :data="watchList" style="width: 100%">
      <el-table-column
        type="index"
        :label="$t('watch.table.index')"
        width="61"
      ></el-table-column>
      <el-table-column prop="name" :label="$t('watch.table.name')" width="180">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="phone_number"
        :label="$t('watch.table.tel')"
        width="180"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="email"
        :label="$t('watch.table.email')"
      >
      </el-table-column>
      <el-table-column :label="$t('watch.table.operation')">
        <template slot-scope="scope">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            plain
            @click="amend(scope.row)"
            >{{ $t("watch.btn.editor") }}</el-button
          >
          <el-popconfirm
            :title="$t('watch.btn.del_sure')"
            @confirm="del(scope.row)"
            style="margin: 0 0 0 10px"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              plain
              >{{ $t("watch.btn.delete") }}</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="watchList.length"
    >
    </el-pagination> -->
    <!-- 添加模态框 -->
    <OperatorOnDutyDialog
      :operatorOnDutyDialog="operatorOnDutyDialogShow"
      @closeDialog="createdProject"
    />
    <!-- 修改模态框 -->
    <ModifyStaffDialog
      :data="tableRowData"
      :ModifyStaffDialog="ModifyStaffDialogShow"
      @closeDialog="amend"
    />
  </div>
</template>

<script>
import OperatorOnDutyDialog from "../../../components/operatorOnDutyDialog.vue";
import ModifyStaffDialog from "../../../components/modifyStaffDialog.vue";
export default {
  components: {
    OperatorOnDutyDialog,
    ModifyStaffDialog,
  },
  data() {
    return {
      // 获取值班人员的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2,
      },
      //添加值班人员模态框状态
      operatorOnDutyDialogShow: false,
      ModifyStaffDialogShow: false,
      //修改表的对象
      tableRowData: {},
      watchList: [],
    };
  },
  created() {
    this.getWatchList();
  },
  methods: {
    del(data) {
      this.$http
        .get("/business/employee/del", { params: { id: data.id } })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(this.$t("watch.btn.del_success_msg"));
            this.getWatchList();
          } else {
            this.$message.error(this.$t("watch.btn.del_error_msg"));
          }
        });
    },
    // 开关模态框
    createdProject(state) {
      this.operatorOnDutyDialogShow = this.operatorOnDutyDialogShow
        ? false
        : true;
      if (state) {
        this.getWatchList();
      }
    },
    //修改按钮
    amend(data) {
      this.ModifyStaffDialogShow = this.ModifyStaffDialogShow ? false : true;
      this.tableRowData = data;
      if (typeof data == "boolean") {
        this.getWatchList();
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getWatchList() {
      this.$http.get("/business/employee/list").then((res) => {
        console.log(res.data.date);
        // this.watchList = res.data.date;
        this.watchList = res.data.date.filter((val) => {
          return val.type != 0;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  color: #606266;
}
.search {
  margin: 10px 0;
  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>